/**
 * Vuex 存储权限路由
 * 1、给用户分配角色，给角色分配权限(已完成)
 * 2、把权限和菜单以及路由关联起来(通过 addRoutes 实现)
 * 3、所有的用户都应该拥有一个基本的路由访问权限(所有用户都应该可以访问登录页、首页、404、导入页等静态路由页面)
 * 4、根据路由标识来筛选出用户登录后的权限路由
 * 5、实现思路：用户登录 >>> 获得标识 >>> 标识和路由关联，并筛选出权限路由 >>> 通过addRoutes添加筛选出出的权限路由
 *
 **/
// vuex中的permission模块用来存放当前的 静态路由 + 当前用户的 权限路由
import { constantRoutes, dynamicRoutes } from '@/router'
const state = {
  routes: constantRoutes // 所有用户默认拥有静态路由权限
}
const mutations = {
  // newRoutes可以认为是 用户登录 通过权限所得到的动态路由的部分
  setRoutes(state, newRoutes) {
    state.routes = [...constantRoutes, ...newRoutes] // 在静态路由的基础上追加不同用户通过权限所获得的动态路由
  }
}
const actions = {
// 通过标识筛选出权限路由
  async filterRoutes(context, menus) {
    // 1、获取路由访问权限标识 不需要再调用接口 可以在权限管理文件中 路由守卫中获取
    // const { roles } = await getUserInfo()
    // 2、拿着路由标识和动态路由中的name相关联
    // menus.filter()
    // console.log(dynamicRoutes)
    const routes = []
    console.log(menus)
    menus.forEach(item => {
      const temp = dynamicRoutes.filter(obj => obj.name === item)
      // console.log(temp) // 得到一个数组 有可能 有元素 也有可能是空数组
      routes.push(...temp)
    })
    // console.log(routes) // 得到的routes是所有模块中满足权限要求的路由数组
    // routes就是当前用户所拥有的 动态路由的权限
    context.commit('setRoutes', routes) // 通过mutations修改state中的routes值 给当前登录用户重新赋予路由权限(这个routes仅仅是为了让当前登录用户能看到对应的权限下的左侧菜单)
    // 这里为什么 return
    return routes // state中的routes数据是用来显示左侧菜单的 而 return 出去的routes数据是用来给用户设置页面访问权限用的(addRoutes)
  }
}

export default {
  namespaced: true, // 保证内部模块的高封闭性 避免其通过全局的方式被调用
  state,
  mutations,
  actions
}

